<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豪华爱心动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
            height: 100vh;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Arial', sans-serif;
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .container {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .heart {
            position: relative;
            width: 200px;
            height: 200px;
            animation: heartbeat 1.2s ease-in-out infinite;
            filter: drop-shadow(0 0 30px rgba(255, 20, 147, 0.8));
        }

        @keyframes heartbeat {
            0%, 100% {
                transform: scale(1) rotate(0deg);
            }
            25% {
                transform: scale(1.1) rotate(-2deg);
            }
            50% {
                transform: scale(1.15) rotate(2deg);
            }
            75% {
                transform: scale(1.1) rotate(-1deg);
            }
        }

        .heart::before,
        .heart::after {
            content: '';
            position: absolute;
            width: 100px;
            height: 160px;
            background: linear-gradient(135deg, #ff6b9d 0%, #ff1744 50%, #e91e63 100%);
            border-radius: 100px 100px 0 0;
            box-shadow: 
                0 0 40px rgba(255, 20, 147, 0.6),
                inset 0 0 20px rgba(255, 255, 255, 0.3),
                0 0 60px rgba(255, 20, 147, 0.4);
            animation: glow 2s ease-in-out infinite alternate;
        }

        @keyframes glow {
            from {
                box-shadow: 
                    0 0 40px rgba(255, 20, 147, 0.6),
                    inset 0 0 20px rgba(255, 255, 255, 0.3),
                    0 0 60px rgba(255, 20, 147, 0.4);
            }
            to {
                box-shadow: 
                    0 0 60px rgba(255, 20, 147, 0.9),
                    inset 0 0 30px rgba(255, 255, 255, 0.5),
                    0 0 100px rgba(255, 20, 147, 0.7);
            }
        }

        .heart::before {
            left: 100px;
            transform: rotate(-45deg);
            transform-origin: 0 100%;
        }

        .heart::after {
            left: 0;
            transform: rotate(45deg);
            transform-origin: 100% 100%;
        }

        .particles {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .particle {
            position: absolute;
            width: 8px;
            height: 8px;
            background: radial-gradient(circle, #ff6b9d 0%, #ff1744 100%);
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(255, 20, 147, 0.8);
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0% {
                transform: translateY(0) translateX(0) scale(0);
                opacity: 0;
            }
            10% {
                opacity: 1;
                transform: translateY(-20px) translateX(10px) scale(1);
            }
            50% {
                transform: translateY(-100px) translateX(50px) scale(1.2);
            }
            100% {
                transform: translateY(-200px) translateX(100px) scale(0);
                opacity: 0;
            }
        }

        .sparkle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: white;
            border-radius: 50%;
            box-shadow: 0 0 6px white, 0 0 12px rgba(255, 255, 255, 0.8);
            animation: sparkle 3s ease-in-out infinite;
        }

        @keyframes sparkle {
            0%, 100% {
                opacity: 0;
                transform: scale(0) rotate(0deg);
            }
            50% {
                opacity: 1;
                transform: scale(1.5) rotate(180deg);
            }
        }

        .ring {
            position: absolute;
            border: 3px solid rgba(255, 20, 147, 0.6);
            border-radius: 50%;
            animation: ripple 2s ease-out infinite;
        }

        @keyframes ripple {
            0% {
                width: 200px;
                height: 200px;
                opacity: 1;
                transform: scale(0.8);
            }
            100% {
                width: 500px;
                height: 500px;
                opacity: 0;
                transform: scale(1.5);
            }
        }

        .title {
            position: absolute;
            top: 20%;
            color: white;
            font-size: 3em;
            font-weight: bold;
            text-shadow: 
                0 0 10px rgba(255, 20, 147, 0.8),
                0 0 20px rgba(255, 20, 147, 0.6),
                0 0 30px rgba(255, 20, 147, 0.4);
            animation: titleGlow 2s ease-in-out infinite alternate;
            z-index: 10;
        }

        @keyframes titleGlow {
            from {
                text-shadow: 
                    0 0 10px rgba(255, 20, 147, 0.8),
                    0 0 20px rgba(255, 20, 147, 0.6),
                    0 0 30px rgba(255, 20, 147, 0.4);
            }
            to {
                text-shadow: 
                    0 0 20px rgba(255, 20, 147, 1),
                    0 0 40px rgba(255, 20, 147, 0.8),
                    0 0 60px rgba(255, 20, 147, 0.6);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="title">❤️</h1>
        <div class="particles" id="particles"></div>
        <div class="ring"></div>
        <div class="ring" style="animation-delay: 0.5s;"></div>
        <div class="ring" style="animation-delay: 1s;"></div>
        <div class="heart"></div>
    </div>

    <script>
        // 创建粒子效果
        const particlesContainer = document.getElementById('particles');
        const particleCount = 30;

        for (let i = 0; i < particleCount; i++) {
            const particle = document.createElement('div');
            particle.className = 'particle';
            particle.style.left = Math.random() * 100 + '%';
            particle.style.top = Math.random() * 100 + '%';
            particle.style.animationDelay = Math.random() * 6 + 's';
            particle.style.animationDuration = (4 + Math.random() * 4) + 's';
            particlesContainer.appendChild(particle);
        }

        // 创建闪烁星星
        function createSparkle() {
            const sparkle = document.createElement('div');
            sparkle.className = 'sparkle';
            sparkle.style.left = Math.random() * 100 + '%';
            sparkle.style.top = Math.random() * 100 + '%';
            sparkle.style.animationDelay = Math.random() * 3 + 's';
            document.querySelector('.container').appendChild(sparkle);
            
            setTimeout(() => {
                sparkle.remove();
            }, 3000);
        }

        // 定期创建闪烁星星
        setInterval(createSparkle, 500);

        // 鼠标交互效果
        document.addEventListener('mousemove', (e) => {
            const heart = document.querySelector('.heart');
            const x = e.clientX / window.innerWidth;
            const y = e.clientY / window.innerHeight;
            
            heart.style.transform = `translate(${(x - 0.5) * 20}px, ${(y - 0.5) * 20}px)`;
        });

        // 点击创建额外粒子爆炸效果
        document.addEventListener('click', (e) => {
            for (let i = 0; i < 10; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = e.clientX + 'px';
                particle.style.top = e.clientY + 'px';
                particle.style.animationDuration = '2s';
                particle.style.animationDelay = '0s';
                document.body.appendChild(particle);
                
                setTimeout(() => {
                    particle.remove();
                }, 2000);
            }
        });
    </script>
</body>
</html>
